<template>
  <div id="storageSiteEdit">
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="700px" :closable="false">
      <Form ref= "formStorageSite" :model="rowData" label-position="right" :label-width="100" :rules="rules">
        <FormItem :label="$t('code')" prop="code"><Input v-model="rowData.code" :readonly="modal.readonly" maxlength=30></Input></FormItem>
        <FormItem :label="$t('name')" prop="name"><Input v-model="rowData.name" :readonly="modal.readonly" maxlength=30></Input></FormItem>
        <FormItem label="IP" prop="host">
          <Input v-model="rowData.host" :readonly="modal.readonly" :placeholder="$t('host')"  maxlength=30></Input>
        </FormItem>
        <FormItem :label="$t('http_url')" prop="url">
          <Input v-model="rowData.url" :readonly="modal.readonly" :placeholder="$t('http_url_hint')"  maxlength=255></Input>
        </FormItem>
        <FormItem :label="$t('http_port')"><Input v-model="rowData.ftpPort" :readonly="modal.readonly"  maxlength=10></Input></FormItem>
        <FormItem :label="$t('http_user')"><Input v-model="rowData.ftpUser" :readonly="modal.readonly"  maxlength=50></Input></FormItem>
        <FormItem :label="$t('http_password')"><Input v-model="rowData.ftpPassword" :readonly="modal.readonly"  maxlength=50></Input></FormItem>
        <FormItem :label="$t('storage_capacity_T')"><Input v-model="rowData.capacity" :readonly="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('organization')">
          <OrganizationTree ref="edtOrgSelect" v-model="rowData.orgId" width="200px"  :readonly="modal.readonly"></OrganizationTree>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {addSite,updateSite} from '@/api/site';
import {apiResult} from "@/libs/util";
export default {
  name: "stroageSiteEdit",
  components: {OrganizationTree},
  computed:{
    rules(){
      return{
        code:[{required: true, message: this.$t('code_must_be_enter'), trigger: 'blur'}],
        name:[{required: true, message: this.$t('name_must_be_enter'), trigger: 'blur'}],
        host:[{required: true, message: this.$t('ip_must_be_enter'), trigger: 'blur'}],//,{type:'string',validator: ipValid, message: '请输入有效的IP地址', trigger: 'blur'}],
        port:[{required: true, message: this.$t('port_must_be_enter'), trigger: 'blur'}],//,{type: 'string',validator: portValid, message: '请输入有效的端口', trigger: 'blur'}],
        url:[{required: true, message: this.$t('play_url_must_be_enter'), trigger: 'blur'}]
      }
    }
  },
  data(){
    return{
      modal:{
        show:false,
        loading:false,
        title:"",
        action:"VIEW",
        readonly:false,
        callback:null
      },
      rowData:{
        id: null,
        code: null,
        name: null,
        type: 2, //存储服务器
        orgId: null,
        host: null,
        port: 8080,
        url: null,
        manufacture: null,
        softVersion: null,
        orgName: null,
        state: 1,
        ftpPort:null,
        ftpUser:null,
        ftpPassword:null,
        capacity:0.0
      },


    }
  },
  methods:{
    openDialog: function (action,row, callback) {
      this.modal.show=true;
      this.modal.readonly=false;
      this.modal.callback = callback;
      this.modal.show = true;
      this.modal.action = action;
      if (action=="ADD"){
        this.modal.title=this.$t('add');
        this.$refs["formStorageSite"].resetFields();
      }else if (action=="VIEW"){
        this.modal.title=this.$t('browse');
        this.$refs["formStorageSite"].resetFields();
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title=this.$t('edit');
      }
      if (row != null) {
        this.rowData = row;
      }
    },
    save(){
      let that = this;
      this.$refs["formStorageSite"].validate((valid) => {
        if (that.modal.action == "VIEW"){that.close();}
        if (valid) {
          /** 新增 */
          if (that.rowData.id == null){
            addSite(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              });
            })
          }else{
            updateSite(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              });
            })
          }
        } else {
          that.$Message.error(this.$t('data_check_error'));
          return;
        }
      })
    },
    close(){
      this.modal.show=false;
      this.$refs["formStorageSite"].resetFields();
    },
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
